<script setup lang="ts">
import { ref, onMounted } from 'vue'
import request from '../../api/request'
import * as echarts from 'echarts'

//获取地图区域div
let map = ref(null)

//echarts地图实例
let myCharts = ref()

//地图编码
const chinaCode = ref(100000)

//当前地图名称
const currentMapName = ref("中国地图") 


onMounted(() => {
    //初始化地图
    myCharts.value = echarts.init(map.value)
    getMapData(chinaCode.value + '_full')

    myCharts.value.on('click', (params: any) => {
        console.log(params, '点击获取');
        if (params.value) {
            currentMapName.value = params.name;
            getMapData(params.value + '_full')
        }
    })
})

//地图回调 初始化地图
const initMap = (mapName: any, mapJSON: any) => {
    //注册地图数据，提过mapName,mapJSON
    echarts.registerMap(mapName, mapJSON)
    //设置myChaets选项
    myCharts.value.setOption({
        //提示框配置
        tooltip: {
            show: false,//是否显示提示框
            textStyle: {
                color: '#FFA500'//提示框文字颜色
            }
        },
        series: [
            {
                //地图系列配置
                type: 'map',//类型为地图
                map: mapName,//使用地图名称
                roam: true,//是否可以拖拽
                selectedMode: "false",//是否可以选中多个区域
                label: {
                    //鼠标移入前配置
                    normal: {
                        show: true,//是否显示文字标签
                        textStyle: {
                            color: '#fff'//文字颜色
                        }
                    },
                    //鼠标移入配置
                    emphasis: {
                        show: true,//高亮时是否显示文字标签
                        textStyle: {
                            color: '#05C3F9'//高亮时文字颜色
                        }
                    }
                },
                //区域样式配置
                itemStyle: {
                    //区块没有移入前配置
                    normal: {
                        areaColor: '#00BAFF',//区域颜色
                        borderColor: '#00BAFF',//区域边框颜色
                        borderWidth: 1//区域边框宽度
                    },
                    //鼠标移入配置
                    emphasis: {
                        areaColor: '#00BAFF',//高亮时区域颜色
                        shadowColor: '#00BAFF',//高亮时阴影颜色
                        shadowBlur: 30//高亮时区阴影模糊度
                    }
                },
                top: "100",//组件距离容器上侧的距离
                left: 'center',//组件距离容器左侧的距离
                zoom: "1.3",//地图缩放
                data: initMapData(mapJSON),//初始化地图数据
            }
        ]
    })
}

//处理数据
const initMapData = (mapJson: any) => {
    let mapData = [];
    //遍历获取地图名称以及编码
    mapData = mapJson.features.map((item: any) => {
        return { name: item.properties.name, value: item.properties.adcode };
    })

    console.log(mapData, 'initMapData')
    return mapData;
}


//获取地图数据
const getMapData = async (mapCode: any) => {
    console.log(mapCode, '省份编码');
    let url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${mapCode}`
    try {
        //请求数据
        let res = await request.get(url)
        console.log(res, '地图接口获取数据');

        if (res.status === 200) {
            const mapJSON = res.data;
            console.log(mapJSON, 'mapJSON')
            initMap(currentMapName.value, mapJSON)
        }
    } catch (error) {
        mapCode = mapCode.toString().replace('_full', '')
        getMapData(mapCode)
    }
}
</script>

<template>
    <div class="center-main-echarts">
        <h2>{{ currentMapName }}</h2>
        <div ref="map" style="width: 100%;height: 800px;"></div>
    </div>
</template>

<style scoped lang="scss">
.center-main-echarts {
    width: 96%;
    height: 30rem;
    position: absolute;
    top: 20rem;
    left: 2%;
    color: #fff;
}
</style>